<template>
	<view class="centerbox">
		<view class="rechTop">
			<view class="imgTitele flex">
				<image src="/static/images/toptitleImage.png"></image>
			</view>
		</view>
		<view class="viewTab">
			<wd-tabs v-model="activeTab" @change="handleChange" inactiveColor='#999999' color='#FFFFFFFF'>
				<block v-for="item in tabs" :key="item">
					<wd-tab :title="`${item}`">
						<view class="cardBox" v-if="dataList" v-for="itembox in dataList" :key='itembox'>
							<view class="YearrBox">
								<span>{{itembox.month}}</span>
							</view>
							<view class="Orderbox">
								<view v-if="itembox.kind==1" class="order_title">
									充值总计：{{itembox.payment_amount }}
								</view>
								<view v-else-if="itembox.kind==2 || itembox.kind==3" class="order_title">
									支出总计：{{itembox.expense_amount}}
								</view>
								<view v-else class="order_title">
									<span>支出总计：{{itembox.expense_amount}}</span>
									<span>充值总计：{{itembox.payment_amount }}</span>
								</view>
								<view class="order_card" v-for="card in itembox.orders" :key="card.id">
									<view class="card_left">
										<img :src="getOrderConfig(card.kind).icon" />
										<view>
											<p>{{ getOrderConfig(card.kind).text }}</p>
											<span>{{ formatDate(card.create_time) }}</span>
										</view>
									</view>
									<view class="card_right">
										<p v-if="card.kind==2 ||card.kind==3">- {{ card.payment_amount }}</p>
										<p v-if="card.kind==1">+ {{card.payment_amount}}</p>
										<span
											v-if="card.kind!=3 && card.original_amount-card.payment_amount>0">省{{ card.original_amount-card.payment_amount }}</span>
									</view>
								</view>
							</view>
						</view>
					</wd-tab>
				</block>
			</wd-tabs>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, onMounted } from 'vue'
	import { httpPost } from '@/utils/http'
	import { useUserStore } from '@/store'
	const userStore = useUserStore()
	const dataList = ref([]);
	const activeTab = ref(0);
	const tabs = ref(['全部', '储值记录', '店内付款', '优惠券记录']);
	const getData = ref({})
	onMounted(() => {
		Getlistorders();
	});
	// 切换 tab 时触发请求
	const handleChange = (event) => {
		activeTab.value = event.index;
		Getlistorders();
	};
	const getOrderConfig = (kind) => {
		const configMap = {
			1: {
				text: '储值',
				icon: '/static/images/OrderStored.png'
			},
			2: {
				text: '店内付款',
				icon: '/static/images/OrderPayment.png'
			},
			3: {
				text: '优惠券',
				icon: '/static/images/OrderYouhui.png'
			}
		}
		return configMap[kind]
	}
	const formatDate = (timestamp) => {
		const date = new Date(timestamp)
		const month = (date.getMonth() + 1).toString().padStart(2, '0')
		const day = date.getDate().toString().padStart(2, '0')
		const hours = date.getHours().toString().padStart(2, '0')
		const minutes = date.getMinutes().toString().padStart(2, '0')
		return `${month}月${day}日 ${hours}:${minutes}`
	}
	// 根据状态获取订单
	const token = uni.getStorageSync('token');
	const Getlistorders = async () => {
		try {
			uni.showLoading({
				title: '加载中...',
				mask: true
			});
			const statusMap = [0, 1, 2, 3];
			const kind = statusMap[activeTab.value];

			const response = await httpPost(
				'/miniapp/list_orders/',
				{
					kind: kind,
				},
				{},
				{
					'Authorization': `Bearer ${userStore.userInfo.token}`,
					'Content-Type': 'application/json;charset=utf-8'
				}
			);
			dataList.value = response.data
		} catch (error) {
			console.error('请求失败:', error);
			uni.showToast({ title: '获取失败', icon: 'none' });
		} finally {
			uni.hideLoading();
		}
	};
</script>
<style scoped>
	:deep(.wd-tabs__nav-item-text) {
		font-size: 28rpx;
	}

	page {
		background-color: black;
		height: 100%;
	}

	:deep(.wd-tabs) {
		background-color: black;
	}
</style>
<style lang="scss" scoped>
	.flex {
		display: flex;
		align-items: center;
		gap: 10rpx
	}

	.centerbox {
		width: 100%;
		height: 100%;
		background-color: black;

		.rechTop {
			width: 100%;
			height: 200rpx;
			background-color: black;
			position: relative;
			padding-top: constant(safe-area-inset-top);
			padding-top: env(safe-area-inset-top);
			display: flex;
			flex-direction: column;
			justify-content: flex-end;

			.imgTitele>image {
				width: 360rpx;
				height: 40rpx;
			}

			.flex {
				display: flex;
				justify-content: center;
				margin-bottom: 35rpx;
			}
		}

		.viewTab {
			:deep(.wd-tabs) {
				background-color: black;
			}

			:deep(.wd-tabs__nav) {
				left: -20rpx;
				background-color: black;
			}

			.cardBox {
				color: white;

				.YearrBox {
					font-size: 30rpx;
					font-weight: 700;
					padding: 30rpx 48rpx;
				}

				.Orderbox {
					padding: 0 48rpx;
					opacity: 1;
					background: #333333;

					.order_title {
						padding: 16rpx 0;
						display: flex;
						justify-content: space-between;
					}

					.order_card {
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 40rpx 0;
						border-top: 1px solid #292929;

						.card_left {
							display: flex;
							align-items: center;
							gap: 20rpx;

							img {
								width: 70rpx;
								height: 70rpx;
							}

							p {
								font-size: 30rpx;
								font-weight: 700;
							}

							span {
								font-size: 28rpx;
								font-weight: 400;
							}
						}

						.card_right {
							text-align: right;
							font-size: 28rpx;
							font-weight: 400;

							span {
								color: #f14725;
							}
						}
					}
				}
			}
		}
	}
</style>